'use client'

import './association-graph-id.css'

import { useParams, useSearchParams } from 'next/navigation'
import { Tabs } from 'antd'
import BackToHome from '@/components/BackToHome'
import { useState, useEffect, lazy, Suspense } from 'react'
import ProfileAnalysis from './components/ProfileAnalysis'
import GraphAnalysis from './components/GraphAnalysis'

const ReactQueryDevtoolsProduction = lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
)

function LeftHeader ({ name, id }) {
    return (
        <div className='text-base'>
            <span>
                {`${name ?? '--'} - 纠纷人员画像（${id ?? '--'}）`}
            </span>
        </div>
    )
}

export default function AssociationGraph () {

    const params = useParams()
    const searchParams = useSearchParams()

    const [key, setKey] = useState(() => ('1'))

    const onChange = (key) => {
        setKey(() => (key))
    }

    useEffect(() => {
        const tab = searchParams.get('tab')
        if (tab === 'profile') {
            setKey(() => ('1'))
        }

        if (tab === 'graph') {
            setKey(() => ('2'))
        }
    }, [searchParams])

    const [showDevtools, setShowDevtools] = useState(false)

    useEffect(() => {
        window.toggleDevtools = () => setShowDevtools((old) => !old)
    }, [])

    return (
        <div className='m-2' style={{ height: 'calc(100% - 156px)' }}>
            <div className='px-4 bg-white rounded-md'>
                <Tabs
                    id='association-graph-id'
                    size="large"
                    tabBarExtraContent={{
                        left: <LeftHeader name={searchParams.get('name')} id={params?.id}/>,
                        right: <BackToHome />,
                    }}
                    activeKey={key}
                    items={[
                        {
                            key: '1',
                            label: '图像分析',
                            children: '',
                        },
                        {
                            key: '2',
                            label: '图谱分析',
                            children: '',
                        }
                    ]}
                    onChange={onChange}
                />
            </div>
            <div className='my-2 w-full h-full'>
                {
                    key === '1' 
                        ? (
                            <ProfileAnalysis />
                        )
                        : null
                }
                {
                    key === '2' 
                        ? (
                            <GraphAnalysis />
                        )
                        : null
                }
            </div>
            {showDevtools && (
                <Suspense fallback={null}>
                    <ReactQueryDevtoolsProduction />
                </Suspense>
            )}
        </div>
    )
}